<template>
	<ul id='gameItem'>
		<li class="item" v-for='item in listData'>
			<a href="">
				<div class="left">
					<img :src="item.imgUrl" alt="" />
				</div>
				<div class="right">
					<div class="top">
						<span style='float: left; color: #000;'>{{ item.name }}</span>
						<span style='float: right; padding-right: 0.5rem; color: #eb2929;'>第{{ item.qishu }}期</span>
					</div>
					<div class="middle">
						<span v-for='val in item.winNum' style='float: left; margin-right: 3px; color: #eb2929;'>{{ val }}</span>
					</div>
					<div class="bottom">
						<span style='float: left; font-size: 12px;'>距{{ parseInt(item.qishu) + 1 }}期截止还有</span>
						<span style='float: right; padding-right: 0.5rem;'>{{ leftTimeCom(item.overtime, item) }}</span>
					</div>
				</div>
			</a>
		</li>
	</ul>
</template>

<script>
	import leftTimer from '../../../plugin/mixin/leftTimer.js'
	
	export default {
		props: ['listData'],
		data () {
			return {
				imgUrl: './src/assets/img/cqssc.png'
			}
		},
		created () {

		},
		methods: {
			leftTimeCom(date, row) {
		        row.left = leftTimer(...date)
		        let setIntervalId = setInterval(() => {
		            row.left = leftTimer(...date)
		        }, 1000)
		        localStorage.setItem('setInterval_id', setIntervalId)
		        return row.left
		    }
		}
	}
</script>

<style lang="less" scoped>
	#gameItem {
		width: 100%;
		.item {
			width: 100%;
			a {
				overflow: hidden;
				display: inline-block;
				width: 100%;
				border-bottom: 1px solid #dcdcdc;
				color: #666666;
				background: url('../../../assets/img/goTo.png') 98% center no-repeat;
				background-size: 0.5rem 1rem;
			}
			.left {
				float: left;
				width: 25%;
				padding: 0.7rem;
				img {
					display: block;
					width: 5rem;
					height: 5rem;
				}
			}
			.right {
				float: right;
				width: 75%;
				.top, .middle, .bottom {
					display: inline-block;
					width: 100%;
					line-height: 1.8rem;
					span {
						display: inline-block;
						font-size: 14px;
					}
				}
				.top {
					padding-top: 0.3rem;
				}
			}
		}
	}
	
</style>